// 自定义按钮权限指令
import { Directive } from "vue";
import { store } from '@/store/index'

export const permission: Directive = {
    mounted(el,binding) {
        // el: 代表的是button  binding是一个对象，里面有value, value: ['sys:addDepartment']
        const { value } = binding
        // console.log(binding,value)
        // 获取用户所有的权限
        const permissions = store.getters["user/getPermissions"]
        // console.log(permissions) // [[Target]]里面的数组
        // 判断传递进来的按钮权限是否存在
        if(value && value instanceof Array && value.length > 0) {
            const permissionRoles = value
            // 判断传递进来的按钮权限字段,是否存在当前用户的permission
            const hasPermission = permissions.some(role => {
                return permissionRoles.includes(role)
            })
            // 没有权限，隐藏
            if(!hasPermission) {
                el.style.display = 'none'
            }
        } else {
            throw new Error('needs roles! Like v-permission="[\'admin\',\'editor\']"');
        }
    }
}